<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>充值</title>
    <link href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" rel="stylesheet"/>
    <style>
        body {
            background: #f2f2f2;
            color: #333;
        }

        .page__hd {
            padding: 20px;
        }

        .page__title {
            text-align: left;
            font-size: 20px;
            font-weight: 600;
        }

        .page__desc {
            margin-top: 5px;
            color: red;
            text-align: left;
            font-size: 14px;
        }

        .page_help {
            color: rgb(150, 146, 146);
            padding: 20px;
            float: right;
        }

        .weui-cells {
            margin-top: 0;
        }

        button[disabled] {
            opacity: 0.7;
        }

        .gift {
            background: red;
            margin-left: 10px;
            color: #fff;
            padding: 2px 4px;
            font-size: 14px;
            border-radius: 4px;
            font-weight: bold;
        }

        .weui-btn {
            background: #333 !important;
        }

        .weui-cells_radio .weui-check:checked+.weui-icon-checked:before {
            color: #333;
        }

        /* 隐藏协议详情弹窗 */
        #agreement-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
            z-index: 1;
        }

        /* 协议详情内容样式 */
        #agreement-content {
            background-color: white;
            width: 80%;
            height: 80%;
            margin: 10% auto;
            padding: 20px;
            overflow-y: scroll;
        }
        .original-price {
            text-decoration: line-through;
        }
    </style>
    <script src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
</head>

<body>
<div class="container" id="container">
    <input id="openId" name="openId" type="hidden" th:value="${openId}">
    <div class="page home js_show">
        <div class="page__bd">
            <div class="weui-cells weui-cells_radio">
                <label class="weui-cell weui-check__label">
                    <div class="weui-cell__bd">
                        <p class="original-price">原价：<span>9.9元</span></p>
                        <p>现价：<span th:text="${amount}+'元'"></span></p>
<!--                        <p th:text="${amount}+'元'"></p>-->
                    </div>
                </label>
            </div>
            <div class="weui-btn-area">
                <button class="weui-btn weui-btn_primary" onclick="fun()" id="charge">立即支付</button>
            </div>
            <input type="checkbox" id="agreement-checkbox" required style="margin-left: 15px;">我已阅读并同意用户协议
            <a href="#" onclick="showAgreement()">用户协议</a>
        </div>
    </div>
</div>

<div id="agreement-modal">
    <div id="agreement-content">
        <h2 style="width:fit-content; margin:0 auto;">用户协议</h2>
        <p>一、知晓与承诺</p>
        <p>此账号仅供了解和学习平台使用规范，购买方已充分知晓并确认，本次交易的账号所有权归属于原平台，依据平台官方规则及相关法律法规，
            账号转让行为可能未获平台许可，甚至可能面临平台的封禁、限制使用等处罚后果。购买方自愿承担因账号交易导致的一切直接、
            间接不利后果，包括但不限于经济损失、账号无法正常使用、个人信息泄露风险等。</p>
        <p>二、免责条款</p>
        <p>自交易完成后，出售方对账号不再具有管理、使用权限，也不再承担账号后续产生的任何费用，如会员续费、因违规需缴纳的罚款等。
            若因购买方后续使用行为致使账号出现违规、被盗用、被冻结或引发法律纠纷，一概与出售方无关，购买方需自行解决并承担全部法律与经济责任。
            对于账号关联的原注册人信息，出售方已尽力清除可操作范围内的个人隐私内容，不承担由此引发的任何侵权赔偿责任；购买方不得利用残留信息从事任何非法活动，否则自行承担法律后果。</p>
        <button onclick="hideAgreement()" style="margin: 0 auto; display: block; font-size: 20px; padding: 7px 15px;">关闭</button>
    </div>
</div>

</body>
</html>
<script>
    wx.ready(function() {
        wx.hideOptionMenu();
    });
    function fun(){
        var checkbox = document.getElementById("agreement-checkbox");
        if (checkbox.checked == false) {
            alert("请阅读并同意用户协议")
            return;
        }
        var openId = $("#openId").val();
        $.post('/pay/wxpay',{"openId":openId},function (result) {
            function onBridgeReady(){
                WeixinJSBridge.invoke(
                    'getBrandWCPayRequest', {
                        "appId":result.data.appId,     //公众号名称，由商户传入
                        "timeStamp":result.data.timeStamp,         //时间戳，自1970年以来的秒数
                        "nonceStr":result.data.nonceStr, //随机串
                        "package":result.data.packageValue,
                        "signType":result.data.signType,
                        "paySign":result.data.paySign //微信签名
                    },
                    function(res){
                        if(res.err_msg === "get_brand_wcpay_request:ok" ){
                            // 使用以上方式判断前端返回,微信团队郑重提示：
                            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                            window.location.href = '/auth/success';
                        }
                    });
            }
            if (typeof WeixinJSBridge == "undefined"){
                if( document.addEventListener ){
                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                }else if (document.attachEvent){
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                }
            }else{
                onBridgeReady();
            }
        })
    }

    // 显示协议详情弹窗函数
    function showAgreement() {
        document.getElementById('agreement-modal').style.display = 'block';
    }

    // 隐藏协议详情弹窗函数
    function hideAgreement() {
        document.getElementById('agreement-modal').style.display = 'none';
    }

    // 监听协议勾选状态改变
    document.getElementById('agreement-checkbox').addEventListener('change', function () {
        if (this.checked) {
            document.getElementById('charge').disabled = false;
        } else {
            // document.getElementById('charge').disabled = true;
        }
    });

</script>

